<template>
    <!-- 工资条 -->
    <div>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <el-row style="padding-top: 25px; padding-left: 20px">
              <el-button type="primary" @click="AddSalaryCalculate"
                >新建工资条</el-button
              >
              <div style="display: inline; position: relative; left: 830px">
                <el-input
                  style="width: 200px"
                  placeholder="请输入关键字"
                  prefix-icon="el-icon-search"
                  v-model="form.schemeName"
                  @keyup.enter.native="search"
                >
                </el-input>
              </div>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div
            class="grid-content bg-purple-dark-two"
            style="padding-top: 20px; padding-left: 20px"
          >
            <el-table :data="tableData" border="true" style="width: 99%">
              <el-table-column
                prop="schemeName"
                label="工资条名称"
                width="190"
              ></el-table-column>
              <el-table-column prop="salaryCycle" label="关联薪资方案" width="190">
              </el-table-column>
              <el-table-column prop="state" label="状态" width="150">
                <template slot-scope="scope">
                  {{
                    scope.row.state == 1
                      ? "未核算"
                      : scope.row.state == 2
                      ? "核算中"
                      : scope.row.state == 3
                      ? "已核算"
                      : "已停用"
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="190">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="handleEdit(scope.$index, scope.row)"
                    type="text"
                  >
                    停用 </el-button
                  ><el-button
                    @click.native.prevent="handleEdit(scope.$index, scope.row)"
                    type="text"
                  >
                    修改 </el-button
                  >
                  <el-button
                    @click.native.prevent="handleEdit(scope.$index, scope.row)"
                    type="text"
                  >
                    删除 </el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="block" style="margin-top: 15px">
              <el-pagination
                align="center"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="form.currentPage"
                :page-sizes="[2, 5, 10, 20]"
                :page-size="form.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  export default {
    data() {
      return {
        tableData: [],
        form: {
          currentPage: 1,
          pageSize: 5,
          schemeName: "",
        },
  
        total: 0,
      };
    },
    created() {
    },
    methods: {
      //查询方法 分页 调查，
      AddSalaryCalculate() {
        this.$router.push("/AddSalaryCalculate"); //添加
      },
      // 修改
      updateSalary(id) {
        this.$router.push({ path: "/AddSalaryCalculate", query: { id, id } });
      },
      // 停用
      stopSalary(id) {
        this.$confirm("是否停用此方案, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$http("salary/stopSalary", {
              params: {
                id: id,
              },
            }).then((res) => {
              if (res.data.code === 200) {
                this.$message(res.data.data);
                this.getSalaryList();
              } else {
                this.$message.error(res.data.data);
              }
            });
          })
          
      },
      // 删除
      deleteSalary(id) {
        this.$confirm("是否删除此方案, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$http("salary/deleteSalary", {
              params: {
                id: id,
              },
            }).then((res) => {
              if (res.data.code === 200) {
                this.$message(res.data.data);
                this.getSalaryList();
              } else {
                this.$message.error(res.data.data);
              }
            });
          })
         
      },
      // 获取薪资方案列表
      search() {
        this.getSalaryList();
      },
      getSalaryList() {
        this.$http.post("salary/getSalaryList", this.form).then((res) => {
          if (res.data.code === 200) {
            this.tableData = res.data.data.rows;
            this.total = res.data.data.total;
          } else {
            this.$message.error(res.data.data);
          }
        });
      },
      //每页条数改变时触发 选择一页显示多少行
      handleSizeChange(val) {
        this.form.currentPage = 1;
        this.form.pageSize = val;
        this.getSalaryList();
      },
      //当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        this.form.currentPage = val;
        this.getSalaryList();
      },
    },
  };
  </script>
  
  <style scoped>
  .block {
    padding-left: 800px;
  }
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: white;
    height: 90px;
  }
  .bg-purple-dark-two {
    background: white;
    height: 600px;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  </style>